<template>
    <div class="songs-container">
      <h1 class="title">歌单界面</h1>
      <div class="song-list">
        <div class="song-card" v-for="(song, index) in songList" :key="index">
          <img :src="song.imageUrl" alt="歌单封面" class="song-cover">
          <div class="song-info">
            <h2 class="song-title">{{ song.title }}</h2>
            <a :href="song.musicLink" class="play-link" target="_blank">播放</a>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  // 模拟歌单数据
  const songList = [
    {
      title: "歌单1",
      imageUrl: "https://img1.kuwo.cn/star/userpl2015/17/38/1732156471548_594972317_500.jpg", // 图片链接
      musicLink: "https://example.com/song1.mp3" // 音乐链接
    },
    {
      title: "歌单2",
      imageUrl: "https://img1.kuwo.cn/star/userpl2015/99/83/1732445609618_598304999_500.jpg",
      musicLink: "https://example.com/song2.mp3"
    },
    {
      title: "歌单3",
      imageUrl: "https://img1.kuwo.cn/star/userpl2015/41/50/1733726163993_500000441_500.jpg",
      musicLink: "https://example.com/song3.mp3"
    }
  ];
  </script>
  
  <style scoped>
  .songs-container {
    padding: 20px;
    background-color: #f4f4f4;
  }
  
  .title {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
  }
  
  .song-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  
  .song-card {
    width: 300px;
    margin-bottom: 30px;
    background-color: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  
  .song-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  }
  
  .song-cover {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
  
  .song-info {
    padding: 15px;
  }
  
  .song-title {
    margin: 0;
    color: #333;
  }
  
  .play-link {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 3px;
    transition: background-color 0.3s ease;
  }
  
  .play-link:hover {
    background-color: #0056b3;
  }
  </style>